<script setup lang="ts">
import NavigationBar from './components/NavigationBar.vue'
import IndexSwiper from './components/IndexSwiper.vue'
import Categories from './components/Categories.vue'
import ProductContainer from './components/ProductContainer.vue'
import { getBannerList, getCardList } from '@/api/home'
import type { ICardResponse } from '@/typings/api'

// 轮播图初始变量
let bannerList = $ref<string[]>([])
let productList = $ref<ICardResponse[]>([])
onLoad(async () => {
  getBannerList().then(res => (bannerList = res.data.img_url.split(',').map(item => item.replace('\n', ''))))
  getCardList().then(res => (productList = res.data))
})
</script>

<template>
  <view relative w-full>
    <NavigationBar />
    <view style="padding: 25rpx 35rpx 0 35rpx" box-border overflow-hidden>
      <view>
        <IndexSwiper :banner-list="bannerList" />
        <Categories />
        <ProductContainer v-for="item in productList" :key="item.id" :title="item.name" :list="item.product_list" />
      </view>
    </view>
  </view>
</template>

